<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>圈子/动态-主页面</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        header {
            height: auto;
        }

        .van-hairline--top-bottom::after,
        .van-hairline-unset--top-bottom::after {
            border: 0;
        }
        .van-tab {
            /* padding: .03rem 0.08rem; */
            padding: 0 0.08rem;
            font-size: .16rem;
        }

        .release {
            margin-right: .12rem;
        }

        .van-tabs__line {
            height: 0.02rem !important;
            width: 18% !important;
            /* margin-bottom: .16rem !important; */
        }

        .van-tabs {
            height: 100%;
        }

        .van-tabs--line .van-tabs__wrap {
            height: 100%;
        }

        .van-tabs__nav--line {
            padding-bottom: 0;
        }

        .van-tabs__line {
            bottom: 0.02rem;
        }

        .flex-x-sb {
            margin-top: 0.08rem;
            height: 0.44rem;
        }

        .van-tab__text--ellipsis {
            line-height: 1.6;
            padding: 0;
        }

        .van-tab--active .van-tab__text {
            font-weight: 700;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <header>
            <div class="flex-x-sb">
                <van-tabs v-model="active" color="#3F8CEC" title-active-color="#3F8CEC" line-height="1px" @click="setFrameGroupIndex">
                    <van-tab title="全部动态"></van-tab>
                    <van-tab title="我的关注"></van-tab>
                </van-tabs>
                <div class="release flex-x-c" @click="goPage">
                    <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/release.png" alt="">发布动态
                </div>
            </div>
        </header>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/restful.js"></script>
    <script>
        apiready = function() {
            api.addEventListener({
                name: 'circle-toggle'
            }, function(ret, err) {
                vm.active = ret.value.active
            });
            vm = new Vue({
                el: '.app',
                data: {
                    active: 0,
                    headerH: 0,
                    frameIndex: 0,
                    frames: [{
                        name: 'circle_all_frm',
                        url: 'circle_all_frm.html',
                    }, {
                        name: 'circle_mine_frm',
                        url: 'circle_mine_frm.html',
                    }, ],

                },
                created() {
                    api.sendEvent({
                        name: 'eventTab',
                        extra: {key:' value'}
                    });
                },
                mounted() {
                    var header = $api.dom('header');
                    this.headerH = fixStatusBar();
                    this.footerH = api.pageParam.footerH;
                    this.openFrameGroup();
                },
                methods: {
                    openFrameGroup() {
                        var vm = this;
                        vm.frames.map((item) => {
                            item.pageParam = {
                                footerH: vm.footerH
                            }
                        })
                        api.openFrameGroup({
                            name: 'circle_group',
                            rect: {
                                marginTop: vm.headerH + 10,
                                marginBottom: vm.footerH,
                                w: 'auto'
                            },
                            scrollEnabled: true,
                            frames: vm.frames,
                            preload: 0
                        }, function(ret, err) {
                            vm.active = ret.index;
                        });
                    },
                    setFrameGroupIndex() {
                        api.setFrameGroupIndex({
                            name: 'circle_group',
                            scroll: true,
                            index: this.active,
                            reload: true
                        });
                    },
                    goPage() {
                        if(!checkToken()) return false;
                        api.openWin({
                            name: 'sendMoment_win',
                            url: 'sendMoment_win.html',
                            bounces: false,
                            pageParam: {
                                title: '发话题'
                            }
                        });
                    }
                }

            })
        }
    </script>
</body>

</html>
